<template>
    <div class="qaWrapper">
        <!-- <div class="header">
            <a href="http://10.10.100.2:8088/apps" target="_blank">
                <el-button type="primary">知识库配置</el-button>
            </a>
        </div> -->
        <div class="content" ref="qaContent">
            <!-- <div class="item">
                <div class="avatar">
                    答
                </div>
     
                <div
                    v-loading="true"
                    :element-loading-svg="svg"
                    class="custom-loading-svg textBox"
                    element-loading-svg-view-box="0, 0, 50, 50"
                    ></div>
            </div> -->
            <!-- <div class="sendItem">
                
                <div class="textBox">qweqwe </div>
                <div class="avatar">
                    <img src="../assets/image/defaultAvatar.jpg" alt="">
                </div>
            </div> -->
            <!-- <template v-for="(item, index) in qas" :key="index">
                <div class="sendItem">
                    
                    <div class="textBox">{{ item.que }}</div>
                </div>
                <div class="item">
      
                    <div
                    v-loading="resLoading && index == qas.length - 1"
                    :element-loading-svg="svg"
                    class="custom-loading-svg textBox"
                    element-loading-svg-view-box="0, 0, 50, 50"
                    >{{ item.res }}</div>
                </div>
            </template> -->
                        <iframe id="iframe" src="http://home.linwine.space:9900/kzzPZLqcbaqyjYQW" class="iframeBox"  frameborder="0" allow="microphone"> </iframe>
<!--            <iframe id="chatbotFrame" style="width:100%; height:700px;"></iframe>-->
        </div>
        <!-- <div class="input">
            <el-input v-model="text" autoSize type="textarea" resize="none" placeholder="请输入您的问题"   @keydown.enter.shift.exact.prevent="handleNewline" @keydown.enter.exact.prevent="handleSend" :autosize="{ minRows:3}" />
            <el-button :disabled="disabled" type="primary" class="sendBtn" @click="handleSend">发送</el-button>
        </div> -->
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
// const show = ref(false)
let flag = false
onMounted(() => {
  const iframe = document.getElementById('iframe');
console.log(iframe);
  // setTimeout(() => {
  //   // 清除 iframe 的 localStorage
  // iframeWindow.localStorage.clear();
  // console.log(iframeWindow.localStorage);
  // // 或删除特定键值
  // iframeWindow.localStorage.removeItem('token');
  // iframeWindow.localStorage.removeItem('conversationIdInfo')
  //   iframeWindow.location.reload(true);
  // }, 1000)
  iframe.addEventListener('load', () => {
    try {
      // if (flag) {
      //   return
      // }
      const iframeWindow = iframe.contentWindow;
      
      // 清除 localStorage
      // iframeWindow.localStorage.clear();
      console.log('已清除:', iframeWindow.localStorage);

      // 删除特定键值
      iframeWindow.localStorage.removeItem('token');
      iframeWindow.localStorage.removeItem('conversationIdInfo');
      
        // setTimeout(() => {
        // // show.value = true
        // flag = true
        //   iframeWindow.location.reload(true);
        // }, 500)
      
      
    } catch (error) {
      console.error('操作失败:', error);
    }
  });

})
</script>
<!--<script setup>-->
<!--import { qaRequest, qaAuthorization, safeJSONParse } from '@/utils';-->
<!--import { ElMessage } from 'element-plus';-->
<!--import {computed, nextTick, ref} from 'vue'-->
<!--const requestBody = {-->
<!--    "response_mode": "streaming",-->
<!--    "conversation_id": "",-->
<!--    "files": [],-->
<!--    "query": "",-->
<!--    "model_config": {-->
<!--        "pre_prompt": "",-->
<!--        "prompt_type": "simple",-->
<!--        "chat_prompt_config": {},-->
<!--        "completion_prompt_config": {},-->
<!--        "user_input_form": [],-->
<!--        "dataset_query_variable": "",-->
<!--        "opening_statement": "",-->
<!--        "more_like_this": {-->
<!--            "enabled": false-->
<!--        },-->
<!--        "suggested_questions": [],-->
<!--        "suggested_questions_after_answer": {-->
<!--            "enabled": false-->
<!--        },-->
<!--        "text_to_speech": {-->
<!--            "enabled": false-->
<!--        },-->
<!--        "speech_to_text": {-->
<!--            "enabled": false-->
<!--        },-->
<!--        "retriever_resource": {-->
<!--            "enabled": true-->
<!--        },-->
<!--        "sensitive_word_avoidance": {-->
<!--            "enabled": false,-->
<!--            "type": "",-->
<!--            "configs": []-->
<!--        },-->
<!--        "agent_mode": {-->
<!--            "enabled": false,-->
<!--            "max_iteration": 5,-->
<!--            "strategy": "react",-->
<!--            "tools": []-->
<!--        },-->
<!--        "dataset_configs": {-->
<!--            "retrieval_model": "multiple",-->
<!--            "top_k": 4,-->
<!--            "reranking_mode": "weighted_score",-->
<!--            "reranking_model": {-->
<!--                "reranking_provider_name": "",-->
<!--                "reranking_model_name": ""-->
<!--            },-->
<!--            "weights": {-->
<!--                "vector_setting": {-->
<!--                    "vector_weight": 0.7,-->
<!--                    "embedding_provider_name": "langgenius/ollama/ollama",-->
<!--                    "embedding_model_name": "deepseek-r1:1.5b"-->
<!--                },-->
<!--                "keyword_setting": {-->
<!--                    "keyword_weight": 0.3-->
<!--                }-->
<!--            },-->
<!--            "reranking_enable": true,-->
<!--            "datasets": {-->
<!--                "datasets": [-->
<!--                    {-->
<!--                        "dataset": {-->
<!--                            "enabled": true,-->
<!--                            "id": "0fff1337-04fc-47d7-b1ba-126463d177af"-->
<!--                        }-->
<!--                    }-->
<!--                ]-->
<!--            }-->
<!--        },-->
<!--        "file_upload": {-->
<!--            "image": {-->
<!--                "detail": "high",-->
<!--                "enabled": false,-->
<!--                "number_limits": 3,-->
<!--                "transfer_methods": [-->
<!--                    "remote_url",-->
<!--                    "local_file"-->
<!--                ]-->
<!--            },-->
<!--            "enabled": false,-->
<!--            "allowed_file_types": [],-->
<!--            "allowed_file_extensions": [-->
<!--                ".JPG",-->
<!--                ".JPEG",-->
<!--                ".PNG",-->
<!--                ".GIF",-->
<!--                ".WEBP",-->
<!--                ".SVG",-->
<!--                ".MP4",-->
<!--                ".MOV",-->
<!--                ".MPEG",-->
<!--                ".MPGA"-->
<!--            ],-->
<!--            "allowed_file_upload_methods": [-->
<!--                "remote_url",-->
<!--                "local_file"-->
<!--            ],-->
<!--            "number_limits": 3,-->
<!--            "fileUploadConfig": {-->
<!--                "file_size_limit": 15,-->
<!--                "batch_count_limit": 5,-->
<!--                "image_file_size_limit": 10,-->
<!--                "video_file_size_limit": 100,-->
<!--                "audio_file_size_limit": 50,-->
<!--                "workflow_file_upload_limit": 10-->
<!--            }-->
<!--        },-->
<!--        "annotation_reply": {-->
<!--            "enabled": false-->
<!--        },-->
<!--        "supportAnnotation": true,-->
<!--        "appId": "c3d91d73-71c7-4589-8d3f-ecb1122daae1",-->
<!--        "supportCitationHitInfo": true,-->
<!--        "model": {-->
<!--            "provider": "langgenius/ollama/ollama",-->
<!--            "name": "deepseek-r1:1.5b",-->
<!--            "mode": "chat",-->
<!--            "completion_params": {}-->
<!--        }-->
<!--    },-->
<!--    "user":"lin",-->
<!--    "inputs":{},-->
<!--    "parent_message_id": null-->
<!--}-->
<!--const loadingSvg = `-->
<!--        <path class="path" d="-->
<!--          M 30 15-->
<!--          L 28 17-->
<!--          M 25.61 25.61-->
<!--          A 15 15, 0, 0, 1, 15 30-->
<!--          A 15 15, 0, 1, 1, 27.99 7.5-->
<!--          L 15 15-->
<!--        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>-->
<!--      `-->
<!--const done = 'message_end'-->
<!--const doing = 'message'-->
<!--let parent_message_id = null-->
<!--const loading = ref(false)-->
<!--const text = ref('')-->
<!--const qas = ref([])-->
<!--const qaContent = ref(null)-->
<!--const resLoading = ref(false)-->
<!--const handleNewline = () => {-->
<!--    text.value += '\n'-->
<!--}-->
<!--const pres = ["<think>", '\n\n', "</think>", '\n\n']-->
<!--// 是否还在思考部分-->
<!--let flag = false-->
<!--let count = 0-->

<!--const init = () => {-->
<!--    count = 0-->
<!--    flag = false-->
<!--    resLoading.value = false-->
<!--    loading.value = false-->
<!--    console.log('init');-->
<!--}-->
<!--const handleSend = async () => {-->
<!--    if (disabled.value) {-->
<!--        return-->
<!--    }-->
<!--    requestBody.query = text.value + '。请用中文回答'-->
<!--    requestBody.parent_message_id = parent_message_id-->
<!--    const item = {-->
<!--        que: text.value,-->
<!--        res: ''-->
<!--    }-->
<!--    qas.value.push(item)-->
<!--    toBottom()-->
<!--    try {-->
<!--        loading.value = true-->
<!--        resLoading.value = true-->
<!--        const res = fetch('/qaApi/chat-messages', {-->
<!--            headers: {-->
<!--                'Authorization': qaAuthorization,-->
<!--                'Content-Type': 'application/json'-->
<!--            },-->
<!--            method: 'post',-->
<!--            body: JSON.stringify(requestBody)-->
<!--        }).then(res => {-->
<!--            if (!res.ok) {-->
<!--                throw new Error('请求失败')-->
<!--            }-->
<!--            console.log(res);-->
<!--            const reader = res.body.getReader();-->
<!--            text.value = ''-->
<!--            readStream(reader)-->
<!--        }).catch(err => {-->
<!--            console.log(err);-->
<!--            ElMessage.error('网络错误')-->
<!--            item.res = '请求失败'-->
<!--            resLoading.value = false-->
<!--            loading.value = false-->
<!--            init()-->
<!--        })-->
<!--    } catch (err) {-->
<!--        console.log(err);-->
<!--        ElMessage.error('网络错误')-->
<!--        item.res = '请求失败'-->
<!--        resLoading.value = false-->
<!--        loading.value = false-->
<!--        init()-->
<!--    }-->
<!--}-->
<!--const disabled = computed(() => {-->
<!--    return text.value.trim().length == 0 || loading.value-->
<!--})-->

<!--function readStream(reader) {-->
<!--    const decoder = new TextDecoder('utf-8');-->

<!--    function read() {-->
<!--        reader.read().then((res) => {-->
<!--            const { done, value } = res-->
<!--            console.log(done, value, 'readStrame');-->
<!--            if (done) {-->
<!--                console.log('Stream 完成');-->
<!--                init()-->
<!--                return;-->
<!--            }-->
<!--            const chunk = decoder.decode(value, { stream: true });-->
<!--            console.log(chunk, 'chunk');-->
<!--            chunk.split('data:').forEach(line => {-->
<!--                console.log(line);-->
<!--                if (line.trim() !== '') {-->
<!--                    const value = safeJSONParse(line)-->
<!--                    // if (line.startsWith('data: ')) {-->
<!--                        // const value = JSON.parse(line.replace('data: ', ''))-->
<!--                     handleStreamData(value);-->
<!--                    // }  -->
<!--                }-->
<!--            });-->
<!--        }).catch(error => {-->
<!--            ElMessage.error('请求失败，请重试')-->
<!--            console.error('读取 Stream 出错:', error);-->
<!--            init()-->
<!--        });-->
<!--    }-->

<!--    read();-->
<!--}-->

<!--function handleStreamData(value) {-->
<!--    try {-->
<!--        const {answer, event, message_id} = value-->
<!--        if (event == done) {-->
<!--            init()-->
<!--            return-->
<!--        }-->
<!--        if (flag && count && answer) {-->
<!--            console.log(answer);-->
<!--            const len = qas.value.length-->
<!--            // 处理接收到的 EventStream 数据，例如将每条消息显示在页面上-->
<!--            resLoading.value = false-->
<!--            parent_message_id = message_id-->
<!--            qas.value[len - 1].res += answer-->
<!--            toBottom()-->
<!--        } else {-->
<!--            if (answer === pres[2]) {-->
<!--                flag = true-->
<!--            } else if (flag && answer === pres[3]) {-->
<!--                count++-->
<!--            }-->
<!--        }-->
<!--    } catch (err) {-->
<!--        console.log(err);-->
<!--        init()-->
<!--        ElMessage.error('请求失败，请重新尝试')-->
<!--    }-->
<!--}-->


<!--// 滚动到底部-->
<!--function toBottom() {-->
<!--    nextTick(() => {-->
<!--        qaContent.value.scrollTop = qaContent.value.scrollHeight-->
<!--    })-->
<!--}-->
<!--</script>-->

<style lang="scss" scope>
.qaWrapper {
  width: 90%;
  height: 100%;
  margin: auto;
  padding-top: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: space-between;

  .content {
    flex: 1;
    width: 100%;
    // overflow: auto;
    // padding-bottom: 40px;
    .sendItem,
    .item {
      width: 90%;
      display: flex;
      margin: auto;
      margin-bottom: 30px;

      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 100%;
        background-color: #fff;
        margin-right: 25px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;

        img {
          // object-fit: contain;
          width: 100%;
          height: 100%;
        }
      }

      .textBox {
        max-width: 80%;
        padding: 15px;
        text-align: left;
        border-radius: 12px;
        background-color: #fff;
        white-space: pre-wrap;
        min-width: 90px;
        font-size: 16px;
        min-height: 42px;
        box-sizing: border-box;
      }
    }

    .sendItem {
      justify-content: flex-end;

      .avatar {
        margin-left: 25px;
      }

      .textBox {
        min-width: 0;
        background-color: #dbeafe;
      }
    }

  }

  .input {
    position: relative;
    width: 100%;

    .sendBtn {
      position: absolute;
      right: 30px;
      bottom: 10px;

    }
  }

  .header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .iframeBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
<style lang="scss">
.qaWrapper {
  .el-textarea__inner {
    border-radius: 40px;
    padding: 20px;
    box-sizing: border-box;
    font-style: 18px;
    padding-bottom: 30px;
  }

  /* 修改滚动条的宽度 */
  ::-webkit-scrollbar {
    width: 10px; /* 纵向滚动条的宽度 */
    height: 10px; /* 横向滚动条的高度 */
  }

  /* 滚动条轨道部分 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
  }

  /* 滚动条滑块部分 */
  ::-webkit-scrollbar-thumb {
    background-color: #8b8b8b;
    border-radius: 10px;
  }

  /* 鼠标悬停在滑块上时 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #777;
  }

  .el-loading-mask {
    background-color: transparent;
  }

  .el-loading-spinner {
    text-align: left;
    padding-left: 30px;
    font-size: 14px;

    svg {
      width: 27px;
    }
  }
}

</style>